Chart.js — Doughnut/Pie, Polar Area, and Bubble Charts

We can make creating charts on a web page easy with Chart.js.

In this article, we’ll look at how to create charts with Chart.js.

Doughnut and Pie Charts

We can create a doughnut chart with the type set to 'doughnut' .

For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      backgroundColor: ['red', 'blue', 'yellow'],
      data: [10, 20, 30]
    }]
  },
});

to create a doughnut chart with 3 colors.

The data is an array of numbers.

Dataset properties includes backgroundColor to change the background color.

borderAlign changes the alignment of the border.

borderColor changes the border color.

borderWidth changes the border width.

hoverBackgroundColor changes the color when we hover over the segments.

hoverBorder changes the segment’s color when we hover on it.

weight changes the weight.

The full list of options are at https://www.chartjs.org/docs/latest/charts/doughnut.html.

Polar Area

A polar area chart is similar to pie charts, but each segment has the same angle.

The radius of the segment is different according to the value.

To create one, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'polarArea',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      backgroundColor: ['red', 'blue', 'yellow'],
      data: [10, 20, 30]
    }]
  },
});

We created a polar area chart with the type set to 'polarArea' .

Everything else is the same as the doughnut chart.

We can change the border alignment with the borderAlign property.

If it’s 'center' , then the border of the arcs will overlap.

If it’s 'inner' , then it’s guaranteed that the borders won’t overlap.

We can change the polar area chart’s global default options with the Chart.defaults.polarArea property.

The full list of options are at https://www.chartjs.org/docs/latest/charts/polar.html.

Bubble Chart

A bubble chart is used to display 3 dimensions of data at the same time.

The location of the bubble is determined by the first 2 dimensions and the corresponding x and y axes.

For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'bubble',
  data: {
    datasets: [{
        label: 'John',
        data: [{
          x: 3,
          y: 7,
          r: 10
        }],
        backgroundColor: "green",
        hoverBackgroundColor: "green"
      },
      {
        label: 'Paul',
        data: [{
          x: 6,
          y: 2,
          r: 10
        }],
        backgroundColor: "green",
        hoverBackgroundColor: "green"
      },
      {
        label: 'George',
        data: [{
          x: 2,
          y: 6,
          r: 10
        }],
        backgroundColor: "green",
        hoverBackgroundColor: "green"
      },
    ]
  }
});

We have an array with the datasets property.

Each entry has the data property with an object with the x , y and r properties.

x and y are the x coordinates.

And r is the radius of the bubble in pixels.

r isn’t scaled by the chart. It’s the eaw radius in pixels of the bubble drawn in the canvas.

We can change many other options like the border, background, hover background color, hover radius, label, and more.

The full list of options are at https://www.chartjs.org/docs/latest/charts/bubble.html

Conclusion

We can create doughnut, pie, polar area, and bubble charts with Chart.js